<template>
  <div>
    <div class="taskStatistics">
      <a-select class="selectInfo" v-model:value="value" label-in-value :options="options" @change="handleChange">
      </a-select>
      <!-- 标题 -->
      <h2 class="taskStatisticsTitle">科研实验统计</h2>
      <!-- 数量 -->
      <a-row type="flex" justify="start" :gutter="16" class="counting">
        <a-col :sm="24" :md="12" :lg="12">
          <div class="countBox green">
            <div class="averageBox">
              <div class="leftContentIcon tobeTestIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">科研项目</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadStatistics.kyNumA }}<span class="unit">个</span> </p>
              </div>
            </div>
            <div class="averageBox">
              <div class="leftContentIcon currentTextIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">在进行科研项目</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadStatistics.kyNumB }}<span class="unit">个</span> </p>
              </div>
            </div>
            <div class="averageBox">
              <div class="leftContentIcon currentTestTimeIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">已完成科研项目</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadStatistics.kyNumC }}<span class="unit">个</span></p>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :sm="24" :md="12" :lg="12">
          <div class="countBox yellowGreen">
            <div class="averageBox">
              <div class="leftContentIcon currentWorkOvertimeIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">累计实验项目</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadStatistics.xmNumA }}<span class="unit">个</span> </p>
              </div>
            </div>
            <div class="averageBox">
              <div class="leftContentIcon accumulateTestIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">待实验项目</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadStatistics.xmNumB }}<span class="unit">个</span> </p>
              </div>
            </div>
            <div class="averageBox" style="padding-left: 6%">
              <div class="leftContentIcon accumulateTestTimeIcon"></div>
              <div class="centerContentInfo">
                <p class="centerContentInfoText">已实验项目</p>
                <p class="centerContentInfoNumber">{{ personalWorkloadStatistics.xmNumC }}<span class="unit">个</span></p>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
      <div class="taskBox">
        <!-- 进行中任务 -->
        <div class="taskProcess">
          <div class="chartsBox">
            <div class="titleText">实验项目统计</div>
            <div class="echarts">
              <HomeLine ref="homeLine1" :setOptionsType="setOptionsType1"  :flag="flag1" :chartData="projectNumberList"></HomeLine>
            </div>
          </div>
        </div>

        <!-- 已完成情况 -->
        <div class="taskCompleted">
          <div class="chartsBox">
            <div class="titleText">人员工作量统计</div>
            <div class="echarts">
              <HomeLine ref="homeLine2" :setOptionsType="setOptionsType2" :flag="flag2" :chartData="staffNumberList"></HomeLine>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref ,reactive,onMounted} from 'vue';
import HomeLine from './HomeLine.vue';
import { leaderListInfo} from '../../api';
const flag1 = ref("1");
const flag2 = ref("2");
const homeLine1 = ref();
const homeLine2 = ref();
const personalWorkloadStatistics = reactive<any>({})
//下拉框
let options = ref<any>([]);
//获取当前年
let date = new Date();
let year = date.getFullYear();
let value = ref<any>({ value: date.getFullYear() });
for (let i = 0; i < 10; i++) {
  options.value.push({
    value: year,
    label: year,
  });
  year--;
}
const handleChange = (value: any) => {
  initGetData(value.value);
};
const setOptionsType1 = ref("line")
const setOptionsType2 = ref('bar')
const projectNumberList = ref({})
const staffNumberList = ref({})
const initGetData = async (year)=>{
  const result = await leaderListInfo({year});
  if(result.success){
    Object.assign(personalWorkloadStatistics,result.result);
    Object.assign(projectNumberList.value,result.result.optionXm); 
    Object.assign(staffNumberList.value,result.result.optionRy);
  }
}
onMounted(() => {
  initGetData(value.value.value);    
})
</script>

<style scoped lang="less">
.taskStatisticsTitle {
  font-size: 14px;
  color: #574a46;
  line-height: 20px;
  padding: 12px 16px 10px 27px;
  font-weight: bold;
  border-bottom: 1px solid #e5eaec;
  text-align: left;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.taskStatistics {
  // padding: 14px 16px;
  box-shadow: 0 0 8px rgba(133, 133, 133, 0.2);
  border-radius: 2px;
  background: #fff;
  position: relative;

  .taskStatisticsTitle {
    padding: 15px 16px 8px 24px;
    margin-bottom: 0px;
  }

  .counting {
    padding: 20px 16px 8px 16px;

    .countBox {
      // padding: 0 8px;
      border-radius: 12px;
      width: 100%;
      height: 110px;
      display: flex;
    }

    .green {
      background: linear-gradient(to right, #96e7de, #82dbd1);
    }

    .yellowGreen {
      background: linear-gradient(to right, #e5e7a7, #d5d779);
    }

    .blue {
      background: linear-gradient(to right, #a3dde9, #67d0e7);
    }

    .averageBox {
      flex: 1;
      display: flex;
      padding: 12px 0% 12px 8%;
      align-items: center;

      .leftContentIcon {
        width: 48px;
        height: 48px;
        margin-right: 16px;
      }

      .centerContentInfo {
        padding-top: 16px;

        .centerContentInfoText {
          font-size: 12px;
          color: #289a8c;
          font-weight: bold;
          line-height: 20px;
          margin-bottom: 16px;
        }

        .centerContentInfoNumber {
          font-size: 24px;
          color: #0a7165;
          font-weight: bold;
          line-height: 36px;
          display: flex;
          align-items: center;

          .unit {
            font-size: 14px;
            color: #6f720b;
            font-weight: normal;
            display: inline-block;
            line-height: 20px;
            margin: 7px 0 0 4px;
          }
        }
      }

      .tobeTestIcon {
        background: url('/@/assets/images/home/toBeTest-icon.png') no-repeat;
        background-size: 100% auto;
      }

      .currentTextIcon {
        background: url('/@/assets/images/home/currentTest-icon.png') no-repeat;
        background-size: 100% auto;
      }

      .currentTestTimeIcon {
        background: url('/@/assets/images/home/currentTestTime-icon.png') no-repeat;
        background-size: 100% auto;
      }

      .currentWorkOvertimeIcon {
        background: url('/@/assets/images/home/current-work-overtime-icon.png') no-repeat;
        background-size: 100% auto;
      }

      .accumulateTestIcon {
        background: url('/@/assets/images/home/accumulate-test-icon.png') no-repeat;
        background-size: 100% auto;
      }

      .accumulateTestTimeIcon {
        background: url('/@/assets/images/home/accumulate-test-time-icon.png') no-repeat;
        background-size: 100% auto;
      }
    }
  }

  .taskBox {
    display: flex;
    flex-direction: column;
    padding: 24px 20px 10px 20px;
    // height: 339px;
    box-sizing: border-box;
    // padding-top: 60px;
    position: relative;
  }

  .selectInfo {
    position: absolute;
    top: 10px;
    right: 20px;
    // left: 0;
    margin: auto auto;
    z-index: 99;
    width: 100px;
  }

  .taskProcess {
    flex: 1;
    margin-right: 30px;
  }

  .taskCompleted {
    flex: 1;
  }

  .echarts {
    margin-top: 15px;
    width: 100%;
  }
  .titleText {
    font-size: 14px;
    line-height: 22px;
    font-weight: bold;
    color: #54504f;
    position: relative;
    padding-left: 16px;
    text-align: left;
  }

  .titleText::before {
    content: '';
    width: 4px;
    height: 22px;
    background: #37a9a7;
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
  }
}
</style>